<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 让网页的宽度自动适应手机屏幕的宽度。initial-scale - 初始的缩放比例,user-scalable - 用户是否可以手动缩放 -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>fullpage.js全屏滚动插件</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css">
	<style>
		body{
			color: #fff;
			margin: 0px;
			padding: 0px;
		}
		#fullpage{
			text-align: center;
		}
		ul li {
			list-style: none;
			display: inline-block;	
		}
		ul li a{
			text-decoration: none;
			color: white;
			padding-left: 10px;
		}
		.slide img{
			height: 100%;
			width: 100%;
		}
		/* #header{
			position: fixed;
			font-size: 30px;
			top: 0;
			right: 150px;
			background: black;
		} */
		#fullpageMenu{
			position: fixed;
			top: 0;
			z-index: 999;
			margin-left: 0px;
		}
		.Menu{
			width: 400px;
			float: right;

		}
		
		.foot img{
			margin:0 auto;
			padding-left: 800px;
			height: 350px;
			width: 350px;
			display: none;
		}
		.foot p{
			padding-left: 800px;
		}
		/* css3过渡效果 */
		.mm1,.mm2,.mm3,.mm4,.mm5{
			width:100px;
			height:50px;
			line-height: 50px;
			background:black;
			transition:width 2s;
			-moz-transition:width 2s; /* Firefox 4 */
			-webkit-transition:width 2s; /* Safari and Chrome */
			-o-transition:width 2s; /* Opera */
		}
		.mm1:hover{
			font-size: 20px;
			color: #333;	
			width:600px;
			background:#CBF2A9;
		}
		.mm2:hover{
			font-size: 20px;
			color: #333;
			width:550px;
			margin-left: 50px;
			background: pink;
		}
		.mm3:hover{
			font-size: 20px;
			color: #333;
			width:600px;	
			background:#F4F3C3;
		}
		.mm4:hover{
			font-size: 20px;
			color: #333;
			width:550px;
			margin-left: 50px;	
			background:#F7CAB2;
		}
		.mm5:hover{
			font-size: 20px;
			color: #333;
			width:600px;
			background:#F97C83;
		}
		.s4_mm{
			padding-left: 500px;
			margin: 0 auto;
		}
		/* css3 360旋转过渡效果 */
		.s2_cont{
			margin-left:600px;
		}
		.s2_1{
			float: left;
			margin-right: 30px;
			width: 100px;
			height: 100px;
			background: black;
			transition:width 2s,height 2s;
			-moz-transition:width 2s,height 2s,-moz-transform 2s;
			-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
			-o-transition:width 2s,height 2s,-o-transform 2s;
		}
		.s2_1:hover{
			background: #333;
			width: 200px;
			height: 200px;
			transform:rotate(360deg);
			-moz-transform:rotate(360deg);
			-webkit-transform:rotate(360deg);
			-o-transform:rotate(360deg);
		}
		.s2_2{float: left;
			line-height: 100px;
			margin-right: 30px;
			width: 100px;
			height: 100px;
			background: black;
			transition:width 2s,height 2s;
			-moz-transition:width 2s,height 2s,-moz-transform 2s;
			-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
			-o-transition:width 2s,height 2s,-o-transform 2s;
		}
		.s2_2:hover{
			width: 200px;
			height: 200px;
			line-height: 200px;
			transform:rotate(180deg);
			-moz-transform:rotate(180deg);
			-webkit-transform:rotate(180deg);
			-o-transform:rotate(180deg);
		}
		.s2_3{float: left;
			margin-right: 30px;
			width: 100px;
			height: 100px;
			background: black;
			transition:width 2s,height 2s;
			-moz-transition:width 2s,height 2s,-moz-transform 2s;
			-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
			-o-transition:width 2s,height 2s,-o-transform 2s;
		}
		.s2_3:hover{
			background: #666;
			width: 200px;
			height: 200px;
			transform:rotate(360deg);
			-moz-transform:rotate(360deg);
			-webkit-transform:rotate(360deg);
			-o-transform:rotate(360deg);
		}
		/* s3 */
		.s3 p{
			padding-top: 800px;
			color: white;
		}
		
	</style>
</head>
<body>
	
	 
	<div id="fullpage">
		<div class="Menu">
			<ul id="fullpageMenu">
				<li data-menuanchor="page1"><a href="#page1">HELLO</a></li>
				<li data-menuanchor="page2"><a href="#page2">HI</a></li>
				<li data-menuanchor="page3"><a href="#page3">GOODBYE</a></li>
				<li data-menuanchor="page4"><a href="#page4">BYE</a></li>
			</ul>
		</div>
		<div class="section">
			<div class="slide"><img src="img/aaa.jpg" alt=""></div>
			<div class="slide"><img src="img/aa.jpg" alt=""></div>
			<div class="slide"><img src="img/a.jpg" alt=""></div>
			<div class="slide"><img src="img/aaaa.jpg" alt=""></div>
		</div>
		<div class="section s2" style="background:url(img/04.jpg)no-repeat;background-size:100% 100%;">
			<div class="s2_cont">
				
				<div class="s2_2">皮皮虾</div>
				<div class="s2_3"></div>
				<div class="s2_2">我们走</div>
				<div class="s2_3"></div>
				<div class="s2_2">Let's Go!</div>
				
			</div>
		</div>
		<div class="section s3" style="background:url(img/08.jpg)no-repeat;background-size:100% 100%;">
			<p>忘记了拥抱 忘记了微笑 忘记了我们曾经那么那么要得好 我们都太骄傲话说得太早</p>
		</div>
		<div class="section s4" style="background:url(img/02.jpg)no-repeat;background-size:100% 100%;">
			<!-- css3过渡效果 -->
			<div class="s4_mm">
				<div class="mm1">秘密</div>
				<div class="mm2">秘密</div>
				<div class="mm3">秘密</div>
				<div class="mm4">秘密</div>
				<div class="mm5">秘密</div>
			</div>
		</div>
		<div class="section foot" style="background:url(img/09.jpg)no-repeat;background-size:100% 100%;">
			<img src="img/ewm.png" alt=""><br><br>
			<p>联系皮皮虾？？</p>
		</div>
	</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#fullpage").fullpage({
				sectionsColor:["red","orange","yellow","green"],     /*为每一个section设置背景颜色*/
				//controlArrows:false,     /*用来控制幻灯片两侧的箭头是否出现,默认值为true*/
				continuousHorizontal:true,
				//verticalCentered:true,   /*每一页的内容是否垂直居中，默认值为true*/
				resize:true,             /*字体是否随窗口缩放而缩放，默认值为false*/
				//scrollingSpeed:1000,     /*滑动的速度*/
				anchors:['page1','page2','page3','page4'],           /*定义锚链接*/
				//lockAnchors:              /*是否锁定锚链接*/
				//easing:                   /*定义页面section滚动的动画方式，默认值为easeInOutCubic,如果修改的话，需要引入jquery.easing.js插件或jQuery ui*/
				//css3:true,                 /*是否使用css3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器，比如移动设备等的速度，如果浏览器不支持css3，则会使用jQuery来替代css3实现滚动效果。*/
				//loopTop:true,              /*滚动到最顶部后是否连续滚动到底部，默认值为false。*/
				//loopBottom:true,           /*滚动到最底部后是否连续滚动回到顶部，默认值为false。*/
				loopHorizontal:true,       /*横向slider幻灯片是否循环滚动，默认值为true*/
				//autoScrolling:false, /*是否使用插件的滚动方式，默认值为true，如果选择false，则会出现浏览器自带的滚动条*/
				//scrollBar:true,         /*是否包含滚动条，默认为false，感觉这个没有什么效果*/
				//paddingTop:"100px",       /*设置每一个section顶部和底部的padding*/
				//paddingBottom:"100px",
				fixedElements:".Menu",   /*固定头部*/
				//keyboardScrolling:true,     /*是否可以使用键盘方向键导航，默认为true*/
				//touchSensitivity:100,     在移动设备中滑动页面的敏感性，默认为5，按百分比来衡量，最高为100，越大则越难滑动。
				continuousVertical:true,      
				/*是否循环滚动，默认为false，这个属性和loopTop、loopBottom不能同时设置,且不会像它们一样跳动*/
				//animateAnchor:false, 
				//recordHistory:true,          /*是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进后退来导航。*/
				//menu:"#fullpageMenu",  
				/*绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。可以设置为菜单的jQuery选择器*/
				navigation:true,  /*是否显示导航，默认为false。如果设置true，会显示小圆点，作为导航*/
				navigationPosition:"left",     /*导航小圆点的位置，可以设置为left或者right*/
				//navigationTooltips:['page1','page2','page3','page4'], /*导航小圆点的tooltips设置，默认为[]，注意按照顺序设置*/
				//showActiveTooltip:false,       /*是否显示当前页面的导航的tooltip信息，默认为false*/
				slidesNavigation:true,        /*是否显示横向黄灯片的导航，默认为false*/
				slidesNavPosition:"bottom",       /*横向幻灯片导航的位置，默认为bottom，可以设置为top或bottom*/
				//scrollOverflow:false,          
				/*内容超过满屏后是否显示滚动条，默认为false 如果设置true，则需要引入jQuery.slimscroll插件才能看到内容*/
				//sectionSelector:".section",       /*section的选择器，默认为.section，通过这样的方式更改选择器的名字*/
				//slideSelector:".slide",           /*slide的选择器，默认为.slide，通过这样的方式更改选择器的名字*/
				 /*向上滚动一页*/
				//moveSectionDown()  /*向下滚动一页*/
				//moveTo(section,slide)               /*滚动到第几页，第几个幻灯片，注意，页面是从1开始，而幻灯片是从0开始*/
			});
			$(".foot").mouseover(function(){
				$(".foot img").fadeIn(5000);
			})
			
		})
	</script>
</body>
